<template>
  <div class="allocate_Seller_dialog">
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="500"
      :before-close="handleClose"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="auto"
        style="max-width: 600px"
      >
        <el-form-item
          label="分配卖家"
          prop="assignedSellerAccountIds"
        >
          <el-select
            v-model="formData.assignedSellerAccountIds"
            multiple
            collapse-tags
            collapse-tags-tooltip
            :max-collapse-tags="2"
            placeholder="请选择卖家"
          >
            <el-option
              v-for="item in tableData"
              :key="item.seller.accountId"
              :label="item.seller.mainUsername"
              :value="item.seller.accountId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

// 获取在当前仓库打包的卖家
// import { getCurrentSellers } from '@/api/warehouseNew.js'
import { allocateSeller } from '@/api/subUserManagement.js'
import { ElMessage } from 'element-plus'

const emits = defineEmits(['handleUpdateTable'])

// 表格数据
const tableData = ref([])

// 查询参数
const queryParams = ref({
  // username: '', // 卖家用户名
  // userId: '', // 卖家用户ID
  pageSize: 999,
  pageNumber: 1,
  sortField: 'createTime',
  sortOrder: 'DESC',
})

// 获取在当前仓库打包的卖家
const getCurrentSellersFn = async () => {
  const res = await getCurrentSellers(queryParams.value)
  console.log(res)
  tableData.value = res.content
}

onMounted(() => {
  getCurrentSellersFn()
})

// 弹窗标题
const dialogTitle = computed(() => {
  return subUserMessage.value.username
    ? `为子用户${subUserMessage.value.username}分配卖家`
    : '分配卖家'
})

// 当前选中的用户信息
const subUserMessage = ref({})

// 表单数据
const formData = ref({
  assignedSellerAccountIds: [],
})

// 表单校验规则
const rules = {
  assignedSellerAccountIds: [
    {
      type: 'array',
      required: true,
      message: '请选择至少一个卖家账号',
      trigger: 'blur',
    },
    {
      validator: (rule, value, callback) => {
        if (value.length === 0) {
          callback(new Error('必须选择至少一个卖家账号'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
}

// 表单实例
const formRef = ref(null)

// 确定分配卖家
const handleConfirm = async () => {
  try {
    await formRef.value.validate()
    let data = {
      warehouseEmpUserId: subUserMessage.value.userId,
      assignedSellerAccountIds:
        formData.value.assignedSellerAccountIds,
    }
    await allocateSeller([data])
    ElMessage.success('分配卖家成功')
    handleClose()
    emits('handleUpdateTable')
  } catch (error) {
    console.log(error)
  }
}

const dialogVisible = ref(false)

const handleOpen = () => {
  dialogVisible.value = true
}

const handleClose = () => {
  formData.value = {
    assignedSellerAccountIds: [],
  }
  dialogVisible.value = false
}

// const data = computed(() => {
//   return formData.value.assignedSellerAccountIds.map(item => {
//     return [
//       {
//         warehouseEmpUserId: 0,
//
//       }
//     ]
//   })
//
// })

defineExpose({
  handleOpen,
  handleClose,
  subUserMessage,
})
</script>

<style scoped></style>
